<template>
  <view class="page-container">
    <view class="header">
      <text class="title">{{intro.title}}</text>
    </view>
    <view class="content">
      <view class="date">
        <navigator url="/pages/index/index" class="link" open-type="switchTab">米多鱼s</navigator>
        {{ intro.created_at?formatTime(intro.created_at):'' }}
      </view>
      <view>
		  <rich-text :nodes="intro.content"></rich-text>
	  </view>
    </view>
  </view>
</template>

<script setup>
import { ref,reactive } from "vue";
import { getById } from "@/api/sysIntro.js"
import { onLoad} from '@dcloudio/uni-app';
const intro = ref({
	title:"",
	content:"",
  created_at:""
})

onLoad((options) => {
		console.log(options);
		getIntro(options.id);
		// You can use the params to update userDetails or perform other actions
	});

const getIntro = async (id)=>{
	await getById(id).then(result=>{
		console.log(result);
    intro.value = result;
	})
}

const formatTime = (datetime) => {
  const date = new Date(datetime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 页面逻辑可以在这里编写
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f5f5;
  font-size: 20rpx;
}

.content{
	line-height: 16rpx;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.content {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
}

.date {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.description {
  margin-bottom: 10px;
}
.link{
	color: #4a90e2;
}
</style>
